<style lang="less" scoped>
  .diagnosis-type{
    width: 100%;
    height: 100%;
    &_title{
      height: 40px;
      background: url('~@/images/contenttitle.png');
      background-repeat: no-repeat;
      background-position: bottom;
      text-align: center;
      color: #00F6FF;
      line-height: 40px;
      margin-bottom: 5px;
    }
    &_content{
      height: calc(100% - 45px);
    }
    /deep/.el-table{
      background-color: #1C479F;
    }
    /deep/.el-table th.is-leaf, .el-table td{
      background-color: #0973ca;
      border-bottom: 1px solid #0973ca;
    }
    /deep/.el-table tr{
      background-color: #1C479F;
    }
    /deep/.el-table td{
      border-bottom: 1px solid #00BFE9;
    }
    /deep/.el-table .cell{
      color: #fff;
    }
    /deep/.el-table th > .cell{
      color: #fff;
    }
    /deep/.el-table--medium td{
      padding: 7px 0;
    }
    /deep/.el-table tbody tr:hover >td  {
      background-color: unset !important;
    }
    /deep/.el-table th.gutter, .el-table td.gutter{
      display: none;
      background-color: #0973ca;
    }
    ::-webkit-scrollbar {
      width: 0px;
      height: 0px;
      background-color: #034694;
    }
    ::-webkit-scrollbar-thumb {
      background-color: #0A306F;
      border-radius: 3px;
    }
  }
</style>

<template>
  <div class="diagnosis-type">
    <div class="diagnosis-type_title">
      <span>诊断类型患者例数</span>
    </div>
    <div class="diagnosis-type_content">
      <el-table
        height="100%"
        :data="tableData"
      >
        <el-table-column label="姓名" align="center" min-width="120px" show-overflow-tooltip prop="diagnosisName" />
        <el-table-column label="日（人次）" align="center" min-width="90px" show-overflow-tooltip prop="numToday" />
        <el-table-column label="月（人次）" align="center" min-width="90px" show-overflow-tooltip prop="numThisMonth" />
        <el-table-column label="环比" align="center" min-width="70px" show-overflow-tooltip prop="ringRatio" />
        <el-table-column label="年累计" align="center" min-width="80px" show-overflow-tooltip prop="numThisYear" />
      </el-table>
    </div>
  </div>
</template>

<script>
import { getDiagnosisPatientNums, getDiagPatientNums } from '@/api/comprehensive/diagnosisType'
export default {
  props: {
    isStrock: {
      type: String,
      default: 'chestPain'
    }
  },
  data() {
    return {
      tableData: [],
      setInter: null
    }
  },
  watch: {
    'isStrock'() {
      this.init()
    }
  },
  mounted() {
    this.init()
    this.setInter = setInterval(() => {
      this.init()
    }, 5000)
  },
  destroyed() {
    clearInterval(this.setInter)
  },
  methods: {
    init() {
      // this.tableData = []
      if (this.isStrock == 'chestPain') {
        getDiagnosisPatientNums({
          hospitalId: this.$store.getters.hospitalId
        }).then(res => {
          if (res.data && res.data.length > 0) {
            this.tableData = res.data
          }
        })
      } else if (this.isStrock == 'stroke') {
        getDiagPatientNums({
          hospitalId: this.$store.getters.hospitalId
        }).then(res => {
          if (res.data && res.data.length > 0) {
            this.tableData = res.data
          }
        })
      }
    }
  }
}
</script>
